<template>
	<view>
		<!-- 追加悬赏 -->
		<u-popup v-model="isShow" mode="center" border-radius="5">
			<view class="sendMsg">
				<view class="header u-flex u-row-between u-p-l-30 u-p-r-30 u-p-t-20 u-p-b-20">
					<view class="">追加悬赏</view>
					<u-icon name="close" @click="close"></u-icon>
				</view>
				<view class="u-p-l-30 u-p-r-30 u-p-t-30">
					<view
						class="alert-warning u-p-20 u-m-b-20"
						:style="[{ backgroundColor: theme.lightColor, color: theme.bgColor }]"
						v-if="qscore > 0 || vuex_config.awardtype == 'score'"
					>
						<view class="text-danger">当前问题悬赏积分为：{{ qscore }} 积分</view>
						<view class="">你可以继续追加悬赏积分，悬赏积分越高，越快得到高质量的回答哦！</view>
					</view>
					<view
						class="alert-warning u-p-20 u-m-b-20"
						:style="[{ backgroundColor: theme.lightColor, color: theme.bgColor }]"
						v-else-if="qprice > 0 || vuex_config.awardtype != 'score'"
					>
						<view class="text-danger">当前问题悬赏金额为：￥ {{ qprice }} 元</view>
						<view class="">你可以继续追加悬赏金额，悬赏金额越高，越快得到高质量的回答哦！</view>
					</view>
				</view>
				<view class="u-flex u-flex-wrap u-p-l-30 u-p-r-30 u-p-b-30 u-border-bottom">
					<view class="pricelist u-p-15" v-for="(item, index) in priceList" :key="index">
						<view class="u-text-center">
							<u-button
								hover-class="none"
								type="primary"
								throttle-time="0"
								:custom-style="{
									width: '100%',
									backgroundColor: btnBgColor(item.check),
									color: btnColor(item.check),
									border: '1px solid ' + theme.faBorderColor
								}"
								size="mini"
								@click="selectPrice(item.value, index)"
							>
								{{ item.key }}
							</u-button>
						</view>
					</view>
				</view>
				<view class="u-p-30 u-flex u-col-center u-row-center u-tips-color">
					{{ !is_currency ? '你当前账户余额为:￥' + vuex_user.money + '元' : '你当前账户积分为:' + vuex_user.score }}
				</view>
				<view class="u-text-center u-p-t-30 u-p-b-30 u-border-top">
					<u-button
						hover-class="none"
						type="primary"
						:custom-style="{ width: '60vw', height: '60rpx', backgroundColor: theme.bgColor, color: theme.color }"
						size="mini"
						@click="commit"
					>
						确认追加
					</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 充值 -->
		<fa-recharge v-model="value" :desc="desc" :money="money" @paySuccess="paySuccess"></fa-recharge>
	</view>
</template>

<script>
export default {
	name: 'fa-add-reward',
	props: {
		source_id: {
			type: [Number, String],
			default: 0
		},
		qscore: {
			type: [Number, String],
			default: 0
		},
		qprice: {
			type: [Number, String],
			default: 0
		},
		currency: {
			type: String,
			default: 'score'
		}
	},
	computed: {
		is_currency() {
			let list = this.currency == 'score' ? this.vuex_config.appendscorelist : this.vuex_config.appendpricelist;
			this.priceList = [];
			for (let i in list) {
				this.priceList.push({
					key: i,
					value: list[i],
					check: false
				});
			}
			return this.currency == 'score';
		}
	},
	data() {
		return {
			isShow: false,
			value: false,
			money: 0,
			priceList: [],
			desc: '您当前余额不足，无法追加悬赏，请先充值！'
		};
	},
	methods: {
		show() {
			this.isShow = true;
		},
		close() {
			this.isShow = false;
		},
		//选择金额
		selectPrice(value, index) {
			this.money = value;
			this.priceList.forEach(item => {
				item.check = false;
			});
			this.$set(this.priceList[index], 'check', true);
		},
		paySuccess() {
			this.value = false;
			this.commit();
		},
		commit: async function() {
			let res = await this.$api.getQuestionReward({
				id: this.source_id,
				money: this.money
			});
			this.$u.toast(res.msg);
			if (!res.code) {
				return;
			}
			if (res.code == -1) {
				this.value = true;
				return;
			}
			this.close();
			this.$emit('update', 'update'); //更新事件
		}
	}
};
</script>

<style lang="scss" scoped>
// 弹出层的公共样式
.sendMsg {
	width: 600rpx;
	height: 770rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.header {
		border-bottom: 1px solid #eee;
		background-color: #f8f8f8;
	}
	.alert-warning {
		border-radius: 6rpx;
	}
}
.text-danger {
	color: #e74c3c;
}
.pricelist {
	width: 33.3%;
}
</style>
